<template>
  <el-select v-model="componentProps.modelValue" v-bind="$attrs">
    <el-option
      v-for="item in props.schema?.component?.componentData.options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
</template>

<script setup lang="ts">
import { computed, PropType } from "vue";
import { DraggableTreeNode, FormDataType, IDMapType } from "../../../type";
import { SelectComponentData, SelectComponentProps } from "./display-select";

const props = defineProps({
  formData: {
    type: Object as PropType<FormDataType>,
    default: () => {
      return {};
    },
  },
  IDMap: {
    type: Object as PropType<IDMapType>,
    default: () => {
      return {};
    },
  },
  schema: {
    type: Object as PropType<DraggableTreeNode<
      SelectComponentProps,
      SelectComponentData
    > | null>,
    default: () => {
      return {};
    },
  },
});
const componentProps = computed({
  get() {
    return props.schema?.component?.componentProps || {};
  },
  set(val) {
    if (props.schema?.component?.componentProps) {
      props.schema.component.componentProps = val;
    }
  },
});
</script>

<style lang="scss" scoped></style>
